<template>
  <div class="UserManagement">
    <div class="left">
      <div class="left-head">组织结构</div>
      <div class="tree-list">
        <el-tree
          ref="singleTree"
          :data="data"
          node-key="id"
          default-expand-all
          :props="defaultProps"
          @current-change="treeClick"
          highlight-current
          :expand-on-click-node="false"
          :render-content="renderContent"
          class="el-tree-redefine"
        ></el-tree>
      </div>
    </div>
    <div class="right">
      <div class="right-operation">
        <el-form ref="form" label-width="60px">
          <el-form-item label="工号:">
            <el-input v-model="getUsersParm.sn" class="yd-input" maxlength="15"></el-input>
          </el-form-item>
          <el-form-item label="姓名:">
            <el-input v-model="getUsersParm.name" class="yd-input" maxlength="15"></el-input>
          </el-form-item>
          <el-button class="but-query" type="text" size="medium" @click="queryClick()">
            <i class="query-icon"></i>查询
          </el-button>
          <el-button class="but-reset" type="text" size="medium" @click="reset()">
            <i class="reset-icon"></i>重置
          </el-button>
          <el-button class="but-add" type="text" size="medium" @click="add_user">
            <i class="add-icon"></i>新增
          </el-button>
          <el-button class="but-modify" type="text" size="medium" @click="update_user">
            <i class="modify-icon"></i>修改
          </el-button>
          <el-button class="but-remove" type="text" size="medium" @click="delete_user">
            <i class="remove-icon"></i>删除
          </el-button>
          <el-button class="but-init" type="text" size="medium" @click="reset_password">
            <i class="init-icon"></i>初始化密码
          </el-button>
        </el-form>
      </div>
      <div class="right-head">
        <span class="head-text">用户操作</span>
      </div>
      <el-table
        :data="tableData"
        border
        stripe
        size="mini"
        class="right-list"
        style="width: 100%;"
        height="calc(100% - 32px - 27px - 27px)"
        highlight-current-row
        @current-change="tableCurrentChange"
      >
        <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
        <el-table-column prop="sn" label="工号"></el-table-column>
        <el-table-column prop="account" label="登录名"></el-table-column>
        <el-table-column prop="organization.name" label="所属部门"></el-table-column>
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="mobile" label="电话"></el-table-column>
        <el-table-column prop="lastLoginTime" label="最后一次登录时间"></el-table-column>
        <el-table-column prop="loginIp" label="登录IP"></el-table-column>
        <el-table-column prop="isOpenSms" label="是否开启短信提醒功能">
          <template slot-scope="scope">
            <span>{{scope.row.isOpenSms && scope.row.isOpenSms === 1 ? "是" : "否"}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="validityTime" label="有效期"></el-table-column>
        <el-table-column label="角色">
          <template slot-scope="scope">
            <span>{{scope.row.roles && groupMakeRoleString(scope.row.roles)}}</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-area">
        <el-pagination
          layout="total, sizes, prev, pager, next, jumper, slot"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[20, 50, 100, 300]"
          :page-size="getUsersParm.size"
          :current-page="getUsersParm.page"
          :total="tansksTotal"
        >
          <el-button type="text" size="mini">前往</el-button>
        </el-pagination>
      </div>
    </div>
    <AddUserPerform ref="AddUserPerform" :organization="selectOrgan" @change="getUsersList"></AddUserPerform>
    <EditUserPerform ref="EditUserPerform" :user="selectUser" @change="getUsersList"></EditUserPerform>
    <el-dialog
      class="delete-user-dialog"
      title="提示"
      :visible.sync="deleteUserDialogVisible"
      width="20%"
      left
    >
      <div class="dialog-body">
        <div class="body-title">确认删除该用户吗？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="deleteUserDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="deleteUserConfirm()">确 定</el-button>
        </span>
      </div>
    </el-dialog>
    <el-dialog
      class="reset-password-dialog"
      title="提示"
      :visible.sync="resetPasswordDialogVisible"
      width="20%"
      left
    >
      <div class="dialog-body">
        <div class="body-title">确认要初始化吗？</div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="resetPasswordDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="resetPasswordConfirm()">确 定</el-button>
        </span>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  organizationsTree,
  usersList,
  deleteUser,
  updateUser,
  postOperationLogs
} from "@/api/apiManagement";
import AddUserPerform from "./components/AddUserPerform";
import EditUserPerform from "./components/EditUserPerform";

export default {
  components: { AddUserPerform, EditUserPerform },

  data() {
    return {
      robot_id: null,
      selection: null,
      data: [],
      selectOrgan: {},
      defaultProps: {
        children: "children",
        label: "name",
        isLeaf: "leaf"
      },
      getUsersParm: {
        page: 0,
        size: 20,
        organizationId: "",
        sn: "",
        name: ""
      },
      tansksTotal: 0,
      tableData: [],
      selectUser: {},
      deleteUserDialogVisible: false,
      resetPasswordDialogVisible: false
    };
  },
  created() {
    this.robot_id = localStorage.getItem("ydRobot_id");
    //
    this.getOrganizationsTree();
    this.getUsersList();
  },
  mounted() {},
  methods: {
    getUsersList() {
      if (this.selectOrgan && this.selectOrgan.id) {
        this.getUsersParm.organizationId = this.selectOrgan.id;
      }
      usersList(this.getUsersParm)
        .then(response => {
          if (response) {
            this.tableData = response.list;
            this.tansksTotal = response.total;
          }
        })
        .catch(() => {});
    },
    groupMakeRoleString(roles) {
      if (roles instanceof Array) {
        let role = "";
        roles.forEach(function(item, index) {
          role = role + " " + item.displayName;
        });
        return role;
      }
      return "";
    },
    getOrganizationsTree() {
      organizationsTree()
        .then(response => {
          if (response) {
            this.data = this.deepRecursionTraversal(response);
          }
        })
        .catch(() => {});
    },
    deepRecursionTraversal(node) {
      node.map(item => {
        if (item.children) {
          this.deepRecursionTraversal(item.children);
        } else {
          item.leaf = true;
          item.id = item.id;
        }
        return item;
      });
      return node;
    },
    renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <i class={data.leaf ? "file" : "folder"} />
          <span style="margin-left:5px;">{node.label}</span>
        </span>
      );
    },
    handleSizeChange(val) {
      this.getUsersParm.size = val;
      this.getUsersList();
    },
    handleCurrentChange(val) {
      this.getUsersParm.page = val;
      this.getUsersList();
    },
    queryClick() {
      this.getUsersList();
    },
    reset_data() {
      this.getUsersParm.page = 0;
      this.getUsersParm.size = 20;
      this.getUsersParm.sn = "";
      this.getUsersParm.organizationId = "";
      this.getUsersParm.name = "";

      this.selectOrgan = {};
      this.selectUser = {};
    },
    reset() {
      this.reset_data();
      this.$refs.singleTree.setCurrentKey(null);
      this.getUsersList();
    },
    treeClick(obj, node) {
      if (obj) {
        this.selectOrgan = obj;
      } else {
        this.selectOrgan = {};
      }
      this.getUsersList();
    },
    add_user() {
      if (this.selectOrgan && this.selectOrgan.id) {
        this.$refs.AddUserPerform.isShowDia(true);
      } else {
        this.$message("请选择组织");
      }
    },
    update_user() {
      if (this.selectUser && this.selectUser.id) {
        this.$refs.EditUserPerform.isShowDia(true);
      } else {
        this.$message("请选择用户");
      }
    },
    delete_user() {
      if (this.selectUser && this.selectUser.id) {
        this.deleteUserDialogVisible = true;
      } else {
        this.$message("请选择用户");
      }
    },
    reset_password() {
      if (this.selectUser && this.selectUser.id) {
        this.resetPasswordDialogVisible = true;
      } else {
        this.$message("请选择用户");
      }
    },
    tableCurrentChange(obj) {
      if (obj) {
        this.selectUser = obj;
      } else {
        this.selectUser = {};
      }
    },
    deleteUserConfirm() {
      deleteUser({}, this.selectUser.id)
        .then(response => {
          this.setOperationLogs("删除-用户-" + this.selectUser.name);
          this.$message({
            message: "删除用户成功",
            type: "success"
          });
          this.deleteUserDialogVisible = false;
          this.getUsersList();
        })
        .catch(() => {});
    },
    resetPasswordConfirm() {
      let parm = {
        password: "123456",
        isOpenSms: this.selectUser.isOpenSms
      };
      updateUser(parm, this.selectUser.id)
        .then(response => {
          this.setOperationLogs("初始密码-用户-" + this.selectUser.name);
          this.$message({
            message: "修改成功",
            type: "success"
          });
          this.resetPasswordDialogVisible = false;
          this.getUsersList();
        })
        .catch(() => {});
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    }
  }
};
</script>

<style>
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  visibility: hidden;
  clear: both;
}
.clearfix {
  *zoom: 1;
}

.UserManagement {
  width: 100%;
  height: 100%;
}
.UserManagement .left {
  width: 300px;
  height: 100%;
  /* background-color: #eeeeee; */
  background-color: #fff;
  border-right: 1px solid rgb(202, 231, 238);
  float: left;
  position: relative;
}
.UserManagement .right {
  position: relative;
  /* width: 100%; */
  width: calc(100% - 300px);
  height: 100%;
  background-color: #ffffff;
  border-left: 1px solid rgb(202, 231, 238);
  float: right;
}
.UserManagement .left-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.UserManagement .tree-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 27px);
  overflow: auto;
}
.UserManagement .el-tree-redefine {
  min-width: 100%;
  display: inline-block;
}
.UserManagement .right-operation {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.UserManagement .right-head {
  width: 100%;
  height: 27px;
  padding: 0 5px;
  line-height: 27px;
  font-size: 13px;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.UserManagement .head-text {
  margin-left: 10px;
}
.UserManagement .right-list {
  width: 100%;
  /* height: 100%; */
  height: calc(100% - 88px);
  /* display: flex;
  flex-flow: column; */
  overflow: hidden;
}

.UserManagement .right-list .el-table__body-wrapper {
  /* overflow: hidden;
  overflow-y: auto;
  flex-grow: 1; */
}

.UserManagement .pagination-area {
  position: absolute;
  width: 100%;
  height: 32px;
  bottom: 0px;
  background-color: #eeeeee;
}

.UserManagement .left .custom-tree-node span {
  font-size: 13px;
}
.UserManagement .folder {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  /* background-color: rgb(10, 158, 80); */
  background-image: url(../../../static/resources/images/folder.png);
  background-size: 100% 100%;
  float: left;
}
.UserManagement .file {
  width: 13px;
  height: 13px;
  margin-top: 3px;
  /* background-color: rgb(255, 0, 0); */
  background-image: url(../../../static/resources/images/file.png);
  background-size: 100% 100%;
  float: left;
}

.UserManagement .right-operation .el-form-item {
  /* width: 300px; */
  width: auto;
  margin-top: 0;
  margin-bottom: 0;
  float: left;
}
.UserManagement .right-operation .el-form-item__label {
  line-height: 26px;
  float: left;
}
.UserManagement .right-operation .el-form-item__content {
  /* width: 200px; */
  margin-left: 5px !important;
  line-height: 26px;
  float: left;
}
.UserManagement .right-operation .yd-input {
  width: 210px;
  height: 27px;
  /* float: left; */
}
.UserManagement .right-operation .yd-input .el-input__inner {
  height: 26px;
  line-height: 24px;
  padding: 0 6px;
  border: 1px solid rgb(202, 231, 238);
}
.UserManagement .right-operation .yd-input .el-input__icon {
  line-height: 26px;
}

.UserManagement .but-query,
.UserManagement .but-reset,
.UserManagement .but-add,
.UserManagement .but-modify,
.UserManagement .but-remove,
.UserManagement .but-init {
  height: 27px;
  margin-left: 15px;
  margin-right: 10px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: left;
}
.UserManagement .query-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/query.png);
  background-size: 100% 100%;
  float: left;
}
.UserManagement .reset-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/reset_a.png);
  background-size: 100% 100%;
  float: left;
}
.UserManagement .add-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/add.png);
  background-size: 100% 100%;
  float: left;
}
.UserManagement .modify-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/modify.png);
  background-size: 100% 100%;
  float: left;
}
.UserManagement .remove-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/remove.png);
  background-size: 100% 100%;
  float: left;
}
.UserManagement .init-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../static/resources/images/init.png);
  background-size: 100% 100%;
  float: left;
}
.UserManagement .normal {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  background-color: rgb(10, 158, 80);
  /* background-image: url(../../../static/resources/images/reset_a.png);
  background-size: 100% 100%; */
  float: left;
}
.UserManagement .error {
  width: 13px;
  height: 13px;
  margin-top: 2px;
  background-color: rgb(255, 0, 0);
  /* background-image: url(../../../static/resources/images/reset_a.png);
  background-size: 100% 100%; */
  float: left;
}
.UserManagement .el-dialog {
  background-color: rgb(215, 239, 236);
  padding-bottom: 5px;
}
.UserManagement .delete-user-dialog .el-dialog__header,
.UserManagement .reset-password-dialog .el-dialog__header {
  padding: 0px 5px;
}
.UserManagement .reset-password-dialog .el-dialog__header .el-dialog__title,
.UserManagement .delete-user-dialog .el-dialog__header .el-dialog__title {
  font-size: 13px;
}
.UserManagement .reset-password-dialog .el-dialog__headerbtn,
.UserManagement .delete-user-dialog .el-dialog__headerbtn {
  top: 3px;
  right: 10px;
}
.UserManagement .reset-password-dialog .el-dialog__body,
.UserManagement .delete-user-dialog .el-dialog__body {
  border: 1px solid #90e8c6;
  background-color: white;
  margin: 0px 5px;
  padding: 0px;
}
.UserManagement .reset-password-dialog .dialog-body .body-title,
.UserManagement .delete-user-dialog .dialog-body .body-title {
  margin: 20px 10px;
}
.UserManagement .reset-password-dialog .dialog-footer,
.UserManagement .delete-user-dialog .dialog-footer {
  display: block;
  text-align: center;
  margin-bottom: 20px;
}
.UserManagement .reset-password-dialog .dialog-footer .el-button,
.UserManagement .delete-user-dialog .dialog-footer .el-button {
  padding: 5px 25px;
  margin-top: 5px;
  font-size: 13px;
}
</style>    